import {Form, Input, Modal, Select, Radio, message} from "antd";
import {phoneReg} from '@/utils/regexp.js'
import { apiRoleList,apiUserAdd } from "@/api/system/user.js";
import React,{useImperativeHandle ,useEffect, useState} from "react";

export default (props) => {
    const [form] = Form.useForm();
    const [roleList,setRoleList] = useState([]);
    const [visible,setVisible] = useState(false);
    const [loading,setLoading] = useState(false);
    /**
     * @desc 获取角色列表
     * */
    useEffect(()=>{
        getRoleList()
    },[])
    // 用useImperativeHandle暴露一些外部ref能访问的属性
    useImperativeHandle(props.onRef,()=>{
        return {
            openStatus
        }
    })
    const openStatus = () => {
        setVisible(!visible)
    }
    const getRoleList = () => {
        apiRoleList({ pageNo: 1, pageSize: 1000, status: 'Y' }).then(res=>{
            if (res.code === 0 && res.data) {
                setRoleList(res.data.map(v => {
                    return {
                        label: v.roleName === 'STORE' ? '门店管理员' : v.roleName,
                        value: v.storeRoleId
                    }
                }))
            }
        })
    }
    const onOk = (e) => {
        setLoading(true)
        form.validateFields().then(values=>{
            apiUserAdd(values).then(res=>{
                if (res.code === 0){
                    message.success('新增成功')
                    setVisible(false);
                    props.getList({pageNo:1,pageSize:10})
                }
                setLoading(false)
            }).catch(e=>{
                setLoading(false)
            })
        })
    }
    return <Modal
        title={"新增用户"}
        open={visible}
        onOk={onOk}
        confirmLoading={loading}
        onCancel={()=>setVisible(false)}
        destroyOnClose={true}
    >
        <Form
            form={form}
            name="register"
            labelCol={{span: 6}}
            wrapperCol={{span: 16}}
            initialValues={{discountAdmin: '0',status: 'Y'}}
            style={{marginTop:20}}
            preserve={false}
        >
            <Form.Item
                label="用户名"
                name="loginName"
                rules={
                    [
                        {
                            required: true,
                            message: '请输入用户名'
                        },
                        {
                            pattern: /^[0-9a-zA-Z]+|[~!@#$%^&*()_.]+$/,
                            message: '只能输入数字与英文字母,特殊符号(~!@#$%^&*()_.)'
                        }
                    ]
                }
            >
                <Input maxLength={16} placeholder={'请输入用户名'}/>
            </Form.Item>
            <Form.Item
                label="密码"
                name="password"
                hasFeedback
                rules={
                    [
                        {
                            required: true,
                            message: "请输入密码"
                        },
                        {
                            pattern: /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{8,16}$/,
                            message: "密码应为字母，数字，特殊符号(~!@#$%^&*()_.)，两种及以上组合，8-16位字符串，如：abcd@1234"
                        }
                    ]
                }
            >
                <Input.Password autoComplete="new-password" placeholder={'请输入密码'}/>
            </Form.Item>
            <Form.Item
                label="确认密码"
                name="confirmPassword"
                dependencies={['password']}
                hasFeedback
                rules={
                    [
                        {
                            required: true,
                            message: "请确认密码"
                        },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('password') === value) {
                                    return Promise.resolve();
                                }
                                return Promise.reject(new Error('确认两次输入的密码一致'));
                            },
                        }),
                    ]
                }
            >
                <Input.Password autoComplete="new-password" placeholder={'请确认密码'}/>
            </Form.Item>
            <Form.Item
                label="姓名"
                name="userName"
                rules={[{required: true, message: "请输入姓名"}, {max: 20}]}
            >
                <Input placeholder={'请输入姓名'}/>
            </Form.Item>
            <Form.Item
                label="手机号"
                name="userMobile"
                rules={[{required: true, message: "请输入手机号"}, {pattern: phoneReg, message: '请输入正确手机号'}]}
            >
                <Input maxLength={11} placeholder={'请输入姓名'}/>
            </Form.Item>
            <Form.Item
                label="角色"
                name="roleId"
                rules={[{required: true, message: "请选择角色"}]}
            >
                <Select placeholder={'请选择角色'} options={roleList}/>
            </Form.Item>
            <Form.Item
                label="折扣权限"
                name="discountAdmin"
            >
                <Radio.Group >
                    <Radio value={'1'} >是</Radio>
                    <Radio value={'0'} >否</Radio>
                </Radio.Group>
            </Form.Item>
        </Form>
    </Modal>
}
